
    <template>
        <view :class="'pop-up ' + (show ? 'show' : 'hide')">
            <view @tap="close" class="pop-up-mask ptp_exposure" data-ptpid="1fkl-vm1a-vieo-9fh2" v-if="show"></view>
            <view :style="'bottom:'+bottom" :class="'pop-box ' + (isPartDetails ? 'pb' : '')">
                <view class="pop-box-title">选择商品规格</view>
                <view @tap="close" class="iconfont iconclose pop-box-close ptp_exposure" data-ptpid="fk13-fu28-zfo1-82hf">
                </view>
				<!-- <div>
					<view :style="{'--main-bg-color':mainColor}" @click="selectData('微信')" :class="activeWechat">
					    <view>微信</view>
					    <view class="iconfont iconradio_selected pop-box-icon"></view>
					</view>
					<view :style="{'--main-bg-color':mainColor}" @click="selectData('余额')" :class="activeEyu">
					    <view>余额</view>
					    <view class="iconfont iconradio_selected pop-box-icon"></view>
					</view>
				</div> -->
				<view class="pop-box-tips" style="display: flex;">
				    <view>商品名称：</view>
				    <view class="pop-box-tips-red goods-name" :style="{'--main-bg-color':'#000'}">{{goodsDetails.goodsName}}</view>
				</view>
				<view class="pop-box-tips" style="display: flex;">
				    <view>商品封面：</view>
				    <view class="pop-box-tips-red goods-name" :style="{'--main-bg-color':'#000'}">
						<image style="width: 64rpx;height: 64rpx;border-radius: 6rpx;" :src="tencent‌Domain+goodsDetails.previewUrl" mode="widthFix"></image>
					</view>
				</view>
				<view v-if="goodsDetails.goods_unit_num" class="pop-box-tips" style="display: flex;">
				    <view>规格：</view>
				    <view class="pop-box-tips-red goods-name" :style="{'--main-bg-color':'#000'}">
						{{goodsDetails.goods_unit_num}}
					</view>
				</view>
				<view v-if="stock!=0" class="pop-box-tips" style="display: flex;align-items: center;align-items: center;position: relative; gap: 20rpx;">
					数量: <u-number-box v-if="type == '单规格'" v-model="value" @change="valChange"></u-number-box>
						<view v-if="type == '多规格'">{{stock}}</view>
				</view>
                <view class="pop-box-tips">
                    <text>需支付：</text>
                    <text v-if="type == '单规格' && stock != 0" class="pop-box-tips-red" :style="{'--main-bg-color':mainColor}">{{ (money * value).toFixed(2) }}元</text>
					<text v-if="type == '单规格' && stock == 0" class="pop-box-tips-red" :style="{'--main-bg-color':mainColor}">{{ money }}元</text>
					<text v-if="type == '多规格'" class="pop-box-tips-red" :style="{'--main-bg-color':mainColor}">{{ (money * stock).toFixed(2) }}元</text>
                </view>
                <view class="pop-box-agreement">
                    <image @tap="selectHandle" class="pop-box-agreement-icon"
                        src="https://qiniu-image.qtshe.com/20210617_selectActive.png" v-if="select"></image>
                    <image @tap="selectHandle" class="pop-box-agreement-icon"
                        src="https://qiniu-image.qtshe.com/20210617_select.png" v-else></image>
                    <view>本人确认</view>
                    <view @tap="jumpToAgreement" class="pop-box-agreement-text" data-ptpid="ufn1-vm1a-vo2m-vu2b">《支付相关协议》
                    </view>
                </view>
                <view @tap="payHandle" class="pop-box-button ptp_exposure" :style="{'--main-bg-color':mainColor}" data-ptpid="du1g-f8h1-ch1n-vhm1">确认支付</view>
            </view>
        </view>
    </template>

    <script>
        export default {
            data() {
                return {
                    select: true,
					activeWechat:'pop-box-select',
					activeEyu:'pop-box-select1',
					confirmData:'',
					value: 1
                };
            },
            props: {
				mainColor:{
					type:String,
					default:'#fa5555'
				},
				tencent‌Domain:{
					type:String,
					default:''
				},
				type:{
					type:String,
					default:'单规格'
				},
				bottom:{
					type:String,
					default:'0px'
				},
				stock:{
					type:  Number,
					default: 1
				},
                show: {
                    type: Boolean,
                    default: false
                },
                money: {
                    type:  Number | String,
                    default: 0
                },
                isPartDetails: {
                    type: Boolean,
                    default: false
                },
                goodsDetails: {
                    type: Object,
                    default(){
                    	return {}
                    }
                }
            },
            methods: {
				valChange(e) {
					console.log('当前值为: ' + e.value)
				},
				selectData(type){
					 
				 
					if(type == '微信'){
						this.activeWechat = `${this.activeWechat} active`
						this.activeEyu = 'pop-box-select1'
					}
					if(type=='余额'){
						this.activeEyu = `pop-box-select1 active`
						this.activeWechat = 'pop-box-select'
					}
					this.confirmData = type
				},
                close: function() {
                    this.$emit("cancel")
                },
                payHandle: function() {
					 
                    this.$emit("success",this.confirmData,this.type == '单规格'?this.value:this.stock)
                },
                jumpToAgreement: function() {

                },
                selectHandle: function() {

                    this.select = !this.select;
                }
            }
        };
    </script>
    <style lang="scss">
         .pop-up.show .pop-box {
             transform: translate(0, 0);
         }
         
         .pop-up.hide .pop-box {
             transform: translate(0, 100%);
         }
         
         .pop-up .pop-up-mask {
             top: 0;
             height: 100%;
             background: rgba(0, 0, 0, 0.6);
             z-index: 998;
         }
         
         .pop-box,
         .pop-up .pop-up-mask {
             position: fixed;
             left: 0;
             width: 100%;
         }
         
         .pop-box {
             background: white;
             border-radius: 24rpx 24rpx 0 0;
             padding: 10px 20px;
         	width: calc(100vw - 40px);
             bottom: 0;
             transition: all 0.2s ease;
             overflow: hidden;
             z-index: 1001;
         }
         
         .pb {
         	// 解决ios底部小黑线
             padding-bottom: calc(env(safe-area-inset-bottom) + 32rpx);
         }
         
         .pop-box .pop-box-title {
             font-size: 40rpx;
             font-weight: 700;
             color: #000;
         }
         
         .pop-box .pop-box-close {
             position: absolute;
             right: 32rpx;
             top: 24rpx;
             color: #9c9c9c;
             font-size: 32rpx;
         }
         
         .pop-box-select {
             margin-top: 20rpx;
             height: 108rpx;
             border-radius: 16rpx;
             display: flex;
             align-items: center;
             justify-content: space-between;
             background: #f6f7fb url('https://qiniu-image.qtshe.com/wechatpay.png') no-repeat 32rpx;
             padding-left: 96rpx;
             background-size: 40rpx 40rpx;
             color: #000;
             font-size: 32rpx;
             font-weight: 700;
             padding-right: 34rpx;
			 border: 1px solid #ccc;
         }
		 .pop-box-select1 {
		     margin-top: 20rpx;
		     height: 108rpx;
		     border-radius: 16rpx;
		     display: flex;
		     align-items: center;
		     justify-content: space-between;
		     background: #f6f7fb url('https://xiangyou-1313406647.cos.ap-nanjing.myqcloud.com/test/1737604304_price-icon.png.png') no-repeat 32rpx;
		     padding-left: 96rpx;
		     background-size: 40rpx 40rpx;
		     color: #000;
		     font-size: 32rpx;
		     font-weight: 700;
		     padding-right: 34rpx;
		 			 border: 1px solid #ccc;
		 }
		 .active {
		    color: var(--main-bg-color);
			border:1px solid var(--main-bg-color);
			 
		 }
		 
         
         .pop-box-icon {
             font-size: 28rpx;
             color: #00ca88;
         }
         
         .pop-box-tips {
             color: #9c9c9c;
             font-size: 28rpx;
             margin-top: 48rpx;
         }
         
         .pop-box-tips-red {
             color: var(--main-bg-color);
             font-weight: 700;
         }
         
         .pop-box-button {
             height: 96rpx;
             background: var(--main-bg-color);
             font-size: 24rpx;
             justify-content: center;
             color: #fff;
             font-size: 32rpx;
             font-weight: 500;
             border-radius: 24rpx;
             margin-top: 64rpx;
         	margin-bottom: 32px;
         }
         
         .pop-box-agreement,
         .pop-box-button {
             display: flex;
             align-items: center;
         }
         
         .pop-box-agreement {
             justify-content: flex-start;
             margin-top: 48rpx;
             color: #aeb2bb;
             font-size: 24rpx;
         }
         
         .pop-box-agreement-icon {
             width: 28rpx;
             height: 28rpx;
             display: block;
             margin-right: 16rpx;
         }
         
         .pop-box-agreement-text {
             color: #111e38;
             font-size: 24rpx;
         }
		 
		 .goods-name{
		 	display: -webkit-box;
		 	gap: 10rpx;
		 	padding: 0 10rpx;
		 	width: 72%;
		 	-webkit-line-clamp: 2;
		 	-webkit-box-orient: vertical;
		 	overflow: hidden;
		 	text-overflow: ellipsis;
		 	white-space: normal;
		 	font-size: 28rpx;
		 }
         
    </style>                